<template>
  <!-- 新增或修改对话框 -->
  <el-dialog :title="edit.title" :close-on-click-modal="false" v-model="edit.open"
             width="1000px" append-to-body style="overflow: scroll;height: 90vh;">
    <el-form ref="formRef" :model="edit.data" :disabled="edit.disabled" :rules="edit.rules"
             label-width="130px" label-suffix="：">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="所属分类" prop="cateName">
             <span>
               {{ edit.data.cateName }}
             </span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="实体对象" prop="paramObjectName">
            <!-- <el-input v-model="edit.data.paramObjectName" placeholder="请输入规则对象名称" clearable /> -->
            <el-select v-model="edit.data.paramObjectName" placeholder="请选择规则对象" clearable
                       style="width: 100%;">
              <el-option v-for="dict in edit.entityObjectList" :key="dict.entityId"
                         :label="dict.entityDesc+'('+dict.entityName+')'"
                         :value="dict.entityName" />
            </el-select>

          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="实体对象属性" prop="paramObjectAttr" style="width: 100%;">
            <el-select v-model="edit.data.paramObjectAttr" placeholder="请选择规则对象属性" clearable
                       style="width: 100%;" @change="handleSelectObjectAttr">
              <el-option v-for="(dict,index) in entityAttrList" :key="index"
                         :label="dict.entityDesc+'('+dict.entityName+')'"
                         :value="dict.entityName" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="元素名称" prop="elementName">
            <el-input v-model="edit.data.elementName" placeholder="请输入元素名称" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="元素编码" prop="elementCode">
            <el-input v-model="edit.data.elementCode" placeholder="请输入元素编码" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" style="display: flex;">
          <el-form-item prop="elementTypeCopy" label="元素类型">
            <el-checkbox v-model="edit.data.isTypeCond" :true-value="'Y'" :false-value="'N'">{{ "条件元素" }}</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="edit.data.isTypeAction" :true-value="'Y'" :false-value="'N'">{{ "动作元素" }}</el-checkbox>
          </el-form-item>

          <!-- <el-form-item prop="elementType" label="元素类型">
            <el-checkbox-group v-model="edit.data.elementType" size="medium" @change="handleCheckedCitiesChange">
              <el-checkbox
                v-for="(item, index) in elementTypeList"
                :key="index" :label="item.value">{{ item.label }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item> -->
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否有效" prop="isEnable">
            <el-switch v-model="edit.data.isEnable" active-value="Y" inactive-value="N" />
            <!--            <el-radio-group v-model="edit.data.isEnable">-->
            <!--              <el-radio v-for="dict in isEnableOptions" :key="dict.dictValue" :label="dict.dictValue">{{dict.dictLabel}}</el-radio>-->
            <!--            </el-radio-group>-->
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-col :span="12">
            <el-form-item label="视图类型" prop="viewType">
              <el-select v-model="edit.data.viewType" placeholder="请选择视图类型" clearable
                         style="width: 100%;">
                <el-option v-for="dict in viewTypeOptions" :key="dict.dictValue" :label="dict.dictLabel"
                           :value="dict.dictValue" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="视图数据源类型" prop="viewDataSourceType">
              <el-select v-model="edit.data.viewDataSourceType" placeholder="请选择视图数据源类型" clearable
                        
                         style="width: 100%;">
                <el-option v-for="dict in viewDateSourceTypes" :key="dict.dictValue" :label="dict.dictLabel"
                           :value="dict.dictValue" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="显示字段" prop="showField">
              <el-input v-model="edit.data.showField" placeholder="请输入显示字段" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="值字段" prop="valueField">
              <el-input v-model="edit.data.valueField" placeholder="请输入值字段" clearable />
            </el-form-item>
          </el-col>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="视图数据源" prop="viewDataSourceValue">
            <el-input v-model="edit.data.viewDataSourceValue" type="textarea" :autosize="{ minRows: 2, maxRows: 4}"
                      placeholder="根据视图数据源类型存储不同的内容
                       1.数据字典：填写字典KEY，从字典表读取KV列表
                       2.Rest接口：填写远程数据请求接口地址
                       3.SQL脚本：填写获取数据的SQL语句" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="映射类型" prop="mappingType">
            <el-select v-model="edit.data.mappingType" placeholder="请选择映射类型" clearable
                       style="width: 100%;">
              <el-option v-for="dict in mappingTypeOptions" :key="dict.dictValue" :label="dict.dictLabel"
                         :value="dict.dictValue" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="映射值" prop="mappingValue">
            <el-input v-model="edit.data.mappingValue" type="textarea" :autosize="{ minRows: 2, maxRows: 4}"
                      placeholder="请输入映射值" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="转换方式" prop="convertType">
            <el-select v-model="edit.data.convertType" placeholder="请选择转换方式" clearable
                       style="width: 100%;">
              <el-option v-for="dict in convertTypeOptions" :key="dict.dictValue" :label="dict.dictLabel"
                         :value="dict.dictValue" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="转换值" prop="convertValue">
            <el-input v-model="edit.data.convertValue" type="textarea" :autosize="{ minRows: 2, maxRows: 4}"
                      placeholder="请输入转换值" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="edit.data.remark" placeholder="请输入备注" type="textarea"
                      :autosize="{ minRows: 2, maxRows: 4}" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="依赖元素" prop="dependentElement">
            <customize-form :item="remarkConfig" :config="remarkConfig" />
<!--            v-if="remarkConfig.extraForm&&Object.keys(remarkConfig.extraForm).length>0"-->
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <dialog-footer @ok="submitForm" @cancel="cancel" :showOk="!edit.disabled" />
<!--    v-slot="footer"-->
  </el-dialog>

</template>

<script>
import {debounceWrapper} from "@/utils/zmids.ts";
import {insert, updateById} from "@/platform/uni/api/uni/element/index.ts";
import {searchAll} from "@/platform/uni/api/uni/element/index.ts";
import CustomizeForm from "@/components/CustomizeForm/index.vue";

export default {
  name: "handle",
  components: {CustomizeForm},
  props: ['editForm', 'viewTypeOptions', 'viewDateSourceTypes', 'mappingTypeOptions', 'convertTypeOptions'],
  data() {
    return {
      remarkConfig: {
        viewTypeValue: '3',
        path: '/uni/element/info/dependentElementListByCategoryCode',
        multiple: true,
        extraForm: {},
        valueFieldFun: (val) => {
          return val.map((e) => `${e.elementName}(${e.elementCode})`).join(',');
        },
        showField: 'elementName',
        realField: 'elementId',
        realValue: '',
        value: '',
        label: '',
        searchColumn: [
          {
            prop: 'elementNameLike',
            label: '元素名称'
          },
          {
            prop: 'elementCodeLike',
            label: '元素编码'
          }
        ],
        columns: [
          {
            prop: 'elementName',
            label: '元素名称'
          },
          {
            prop: 'elementCode',
            label: '元素编码'
          }
        ]

      },
      // 查询参数
      queryParams: {
        entityId: undefined
      },
      entityAttrList: [],
      edit: {},
    }
  },
  mounted() {
    this.edit = this.editForm
    console.log(this.edit)
    this.elementTypeCopy = 'Y'
  },
  computed: {
    elementTypeCopy: {
      get() {
        const item = this.edit.data || {}
        if (item['isTypeCond'] === 'Y' || item['isTypeAction'] === "Y")
          return 'Y'
        else
          return ''

      }
    },
  },
  watch: {
    'elementTypeCopy': {
      deep: true,
      immediate: true,
      handler(val) {
        if(this.edit && this.edit.data) {
          this.edit.data.elementTypeCopy = val;
        }
      }
    },
    'edit.data.viewDataSourceType': {
      deep: true,
      immediate: true,
      handler(val) {
        if (val === 'dict') {
          this.edit.data.showField = 'dictLabel';
          this.edit.data.valueField = 'dictValue';
        }

      }
    },
    // 'edit.data.paramObjectAttr': {
    //   deep: true,
    //   immediate: true,
    //   handler(val) {
    //     if (val){
    //       let obj = this.entityAttrList.find(e => e.entityName === val);
    //       // this.edit.data.elementName = obj?.entityDesc;
    //       // this.edit.data.elementCode = obj?.entityName;
    //       this.edit.data.paramObjectAttrEntityId = obj?.entityId;
    //     }
    //   }
    // },
    'edit.data.paramObjectName': {
      deep: true,
      immediate: true,
      handler(val) {
        if (val)
          this.handleSelectObject(val);
      }
    },
    'remarkConfig.realValue': {
      deep: true,
      immediate: true,
      handler(val) {
        // this.$set(this.edit.data, 'dependentElement', val);
        // this.$set(this.edit.data, 'dependentElementName', this.remarkConfig.value);
      }
    }
  },
  methods: {
    setListItem(ret) {
      // this.$set(this.remarkConfig, 'extraForm', ret);
      // this.$set(this.remarkConfig, 'realValue', this.edit.data?.dependentElement || '');
      // this.$set(this.remarkConfig, 'value', this.edit.data?.dependentElementName || '');
      // this.$set(this.remarkConfig, 'label', this.edit.data?.dependentElementName || '');

    },
    // 选择依赖元素
    // handleSelect() {
    //   //获取父分类的元素列表
    //   this.getParentElementList();
    //
    //   this.selectForm.isModify = false;
    //   this.selectForm.title = "选择元素";
    //   this.selectForm.cateId = this.selectOption?.value;
    //   this.selectForm.open = true;
    // },

    //选择对象后获取对象属性
    handleSelectObject: debounceWrapper(function (val) {
      this.loading = true;
      this.queryParams.parentId = this.edit.entityObjectList.find(e => e.entityName === val).entityId;
      this.queryParams.isObject = '';
      searchAll(this.queryParams).then(response => {
        this.entityAttrList = response.data;
        if (this.edit.data.paramObjectAttr && !this.entityAttrList.find(e => e.entityName === this.edit.data.paramObjectAttr)) {
          this.edit.data.paramObjectAttr = '';
        }
        this.loading = false;
      });
    }),

    //选择对象属性后获取对象属性数据类型
    handleSelectObjectAttr: debounceWrapper(function (val) {
      let obj = this.entityAttrList.find(e => e.entityName === val);
      this.edit.data.paramObjectDataType =obj?.entityClass;
      this.edit.data.elementName = obj?.entityDesc;
      this.edit.data.elementCode = obj?.entityName;
      this.edit.data.paramObjectAttrEntityId = obj?.entityId;
      this.edit.data.paramObjectDataType = obj?.entityClass;
    }),

    // 提交按钮
    submitForm: debounceWrapper(function () {


      this.$refs["formRef"].validate(valid => {
        if (valid) {

          //校验是否选择元素类型
          if (this.edit.data.isTypeAction === 'N' && this.edit.data.isTypeCond === 'N') {
            this.$message.error("请选择元素类型");
            return;
          }


          const ifUpdate = this.edit.isModify;
          const promise = ifUpdate ? updateById(this.edit.data) : insert(this.edit.data);
          promise.then(response => {
            if (response.data === 1) {
              this.msgSuccess(ifUpdate ? '修改成功' : '新增成功');
              this.edit.open = false;
              this.$emit('getList');
            }
          });
        }
      });
    }),
    // 取消按钮
    cancel() {
      this.edit.open = false;
      this.$emit('reset');
    },
    resetCurrentForm() {
      // 重置字段校验
      this.$refs.formRef && this.$refs.formRef.clearValidate();
      // this.resetForm("formRef");
    }
  }
}
</script>

<style scoped>

</style>
